<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
<h1>WebSocket Chat Example</h1>
<input id="username" style="display:block; width: 100px; box-sizing: border-box;" type="text" placeholder="username">
<button id="join-chat" type="button">Join Chat</button>
<textarea id="chat" style="display: block; width: 600px; height: 400px; box-sizing: border-box;" cols="30"
          rows="10"></textarea>
<input id="input" style="display: block; width: 600px; box-sizing: border-box;" type="text" placeholder="chat">

<script>
    const username = document.querySelector("#username");
    const join_btn = document.querySelector("#join-chat");
    const textarea = document.querySelector("#chat");
    const input = document.querySelector("#input");

    join_btn.addEventListener("click", function (e) {
        this.disabled = true;

        const websocket = new WebSocket("ws://localhost:3000/websocket");

        websocket.onopen = function () {
            console.log("connection opened");
            websocket.send(username.value);
        };

        const btn = this;

        websocket.onclose = function () {
            console.log("connection closed");
            btn.disabled = false;
        };

        websocket.onmessage = function (e) {
            console.log("received message: " + e.data);
            textarea.value += e.data + "\r\n";
        };

        input.onkeydown = function (e) {
            if (e.key === "Enter") {
                websocket.send(input.value);
                input.value = "";
            }
        };
    });
</script>
</body>
</html>